<template>
  <div>
     <div :style="{ height: setting.options.height + 'px' }" :id="id"></div>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

  import { getGuid } from '@/utils/util'
  import { WordCloud } from '@antv/g2plot'
  export default {
    name: 'G2Pie',
    props: ['setting'],
    data() {
      return {
        id: getGuid(),
      }
    },
    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
      var that = this
      if (that.setting !== undefined && that.setting.data !== undefined) {
        const wordCloud = new WordCloud(this.id, {
          data: that.setting.data,
          autoFit: true,
          wordField: 'name',
          weightField: 'value',
          colorField: 'name',
          wordStyle: {
            fontFamily: 'Verdana',
            fontSize: [8, 32],
            rotation: 0,
          },
          // 返回值设置成一个 [0, 1) 区间内的值，
          // 可以让每次渲染的位置相同（前提是每次的宽高一致）。
          random: () => 0.5,
        })
        wordCloud.render()
      } else {
        fetch(
          'https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json'
        )
          .then((res) => res.json())
          .then((data) => {
            const wordCloud = new WordCloud(this.id, {
              data,
              autoFit: true,
              wordField: 'name',
              weightField: 'value',
              colorField: 'name',
              wordStyle: {
                fontFamily: 'Verdana',
                fontSize: [8, 32],
                rotation: 0,
              },
              // 返回值设置成一个 [0, 1) 区间内的值，
              // 可以让每次渲染的位置相同（前提是每次的宽高一致）。
              random: () => 0.5,
            })

            wordCloud.render()
          })
      }
    },
  }
</script>
